{{define "base.html"}}
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>{{template "title" .}}</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Favicon -->
    <link rel="icon" href="{{.basePath}}/favicon">

    <!-- Font Awesome -->
    <link rel="stylesheet" href="{{.basePath}}/static/plugins/fontawesome-free/css/all.min.css">
    <!-- iCheck for checkboxes and radio inputs -->
    <link rel="stylesheet" href="{{.basePath}}/static/plugins/icheck-bootstrap/icheck-bootstrap.min.css">
    <!-- Select2 -->
    <link rel="stylesheet" href="{{.basePath}}/static/plugins/select2/css/select2.min.css">
    <!-- Toastr -->
    <link rel="stylesheet" href="{{.basePath}}/static/plugins/toastr/toastr.min.css">
    <!-- Jquery Tags Input -->
    <link rel="stylesheet" href="{{.basePath}}/static/plugins/jquery-tags-input/dist/jquery.tagsinput.min.css">
    <!-- Ionicons -->
    <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
    <!-- overlayScrollbars -->
    <link rel="stylesheet" href="{{.basePath}}/static/dist/css/adminlte.min.css">
    <!-- Google Font: Source Sans Pro -->
    <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">

    <!-- START: On page css -->
    {{template "top_css" .}}
    <!-- END: On page css -->
</head>

<body class="hold-transition sidebar-mini">
    <!-- Site wrapper -->
    <div class="wrapper">
        <!-- Navbar -->
        <nav class="main-header navbar navbar-expand navbar-white navbar-light">
            <!-- Left navbar links -->
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link" data-widget="pushmenu" href="#" role="button"><i class="fas fa-bars"></i></a>
                </li>
            </ul>

            <!-- SEARCH FORM -->
            <form class="form-inline ml-3" style="display: none" id="search-form">
                <div class="input-group input-group-sm">
                    <input class="form-control form-control-navbar" placeholder="Search"
                        aria-label="Search" id="search-input">
                    <div class="input-group-append">
                        <button class="btn-navbar" type="submit" disabled>
                            <i class="fas fa-search"></i>
                        </button>
                    </div>
                </div>
                <div class="form-group form-group-sm">
                    <select name="status-selector" id="status-selector" class="custom-select form-control-navbar" style="margin-left: 0.5em; height: 90%; font-size: 14px;">
                        <!-- THIS SECTION IS OVERRIDDEN BY JS. SEE updateSearchList() function in clients.html BEFORE EDITING -->
                        <option value="All">All</option>
                        <option value="Enabled">Enabled</option>
                        <option value="Disabled">Disabled</option>
                        <option value="Connected">Connected</option>
                        <option value="Disconnected">Disconnected</option>
                        <!-- THIS SECTION IS OVERRIDDEN BY JS. SEE updateSearchList() function in clients.html BEFORE EDITING -->
                    </select>
                </div>
            </form>

            <!-- Right navbar links -->
            <div class="navbar-nav ml-auto">
                <button style="margin-left: 0.5em;" type="button" class="btn btn-outline-primary btn-sm" data-toggle="modal"
                    data-target="#modal_new_client"><i class="nav-icon fas fa-plus"></i> New
                    Client</button>
                <button id="apply-config-button" style="margin-left: 0.5em; display: none;" type="button" class="btn btn-outline-danger btn-sm" data-toggle="modal"
                    data-target="#modal_apply_config"><i class="nav-icon fas fa-check"></i> Apply
                    Config</button>
                {{if .baseData.CurrentUser}}
                <button onclick="location.href='{{.basePath}}/logout';" style="margin-left: 0.5em;" type="button"
                    class="btn btn-outline-danger btn-sm"><i class="nav-icon fas fa-sign-out-alt"></i> Logout</button>
                {{end}}
            </div>
        </nav>
        <!-- /.navbar -->

        <!-- Main Sidebar Container -->
        <aside class="main-sidebar sidebar-dark-primary elevation-4">
            <!-- Brand Logo -->
            <a href="{{.basePath}}" class="brand-link">
                <span class="brand-text">&nbsp; WIREGUARD UI</span>
            </a>

            <!-- Sidebar -->
            <div class="sidebar">
                <!-- Sidebar user (optional) -->
                <div class="user-panel mt-3 pb-3 mb-3 d-flex">
                    <div class="image">
                        <i class="nav-icon fas fa-2x fa-user"></i>
                    </div>
                    <div class="info">
                        {{if .baseData.CurrentUser}}

                        {{if .baseData.Admin}}
                        <a href="{{.basePath}}/profile" class="d-block">Administrator: {{.baseData.CurrentUser}}</a>
                        {{else}}
                        <a href="{{.basePath}}/profile" class="d-block">Manager: {{.baseData.CurrentUser}}</a>
                        {{end}}

                        {{else}}
                        <a href="#" class="d-block">Administrator</a>
                        {{end}}
                    </div>
                </div>

                <!-- Sidebar Menu -->
                <nav class="mt-2">
                    <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
                        <li class="nav-header">MAIN</li>
                        <li class="nav-item">
                            <a href="{{.basePath}}/" class="nav-link {{if eq .baseData.Active ""}}active{{end}}">
                                <i class="nav-icon fas fa-user-secret"></i>
                                <p>
                                    Wireguard Clients
                                </p>
                            </a>
                        </li>

                        {{if .baseData.Admin}}
                        <li class="nav-item">
                            <a href="{{.basePath}}/wg-server" class="nav-link {{if eq .baseData.Active "wg-server" }}active{{end}}">
                                <i class="nav-icon fas fa-server"></i>
                                <p>
                                    Wireguard Server
                                </p>
                            </a>
                        </li>


                        <li class="nav-header">SETTINGS</li>
                        <li class="nav-item">
                            <a href="{{.basePath}}/global-settings" class="nav-link {{if eq .baseData.Active "global-settings" }}active{{end}}">
                                <i class="nav-icon fas fa-cog"></i>
                                <p>
                                    Global Settings
                                </p>
                            </a>
                        </li>
                        {{if not .loginDisabled}}
                        <li class="nav-item">
                            <a href="{{.basePath}}/users-settings" class="nav-link {{if eq .baseData.Active "users-settings" }}active{{end}}">
                            <i class="nav-icon fas fa-cog"></i>
                            <p>
                                Users Settings
                            </p>
                            </a>
                        </li>
                        {{end}}
                        {{end}}

                        <li class="nav-header">UTILITIES</li>
                        <li class="nav-item">
                            <a href="{{.basePath}}/status" class="nav-link {{if eq .baseData.Active "status" }}active{{end}}">
                                <i class="nav-icon fas fa-signal"></i>
                                <p>
                                    Status
                                </p>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a href="{{.basePath}}/wake_on_lan_hosts" class="nav-link {{if eq .baseData.Active "wake_on_lan_hosts" }}active{{end}}">
                                <i class="nav-icon fas  fa-solid fa-power-off"></i>
                                <p>
                                    WoL Hosts
                                </p>
                            </a>
                        </li>
                        <li class="nav-header">ABOUT</li>
                        <li class="nav-item">
                            <a href="{{.basePath}}/about" class="nav-link {{if eq .baseData.Active "about" }}active{{end}}">
                            <i class="nav-icon fas  fa-solid fa-id-card"></i>
                            <p>
                                About
                            </p>
                            </a>
                        </li>
                    </ul>
                </nav>
                <!-- /.sidebar-menu -->
            </div>
            <!-- /.sidebar -->
        </aside>

        <div class="modal fade" id="modal_new_client">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title">New Wireguard Client</h4>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <form name="frm_new_client" id="frm_new_client">
                        <div class="modal-body">
                            <div class="form-group">
                                <label for="client_name" class="control-label">Name</label>
                                <input type="text" class="form-control" id="client_name" name="client_name">
                            </div>
                            <div class="form-group">
                                <label for="client_email" class="control-label">Email</label>
                                <input type="text" class="form-control" id="client_email" name="client_email">
                            </div>
                            <div class="form-group">
                                <label for="subnet_ranges" class="control-label">Subnet range</label>
                                <select id="subnet_ranges" class="select2"
                                    data-placeholder="Select a subnet range" style="width: 100%;">
                                </select>
                            </div>
                            <div class="form-group">
                                <label for="client_allocated_ips" class="control-label">IP Allocation</label>
                                <input type="text" data-role="tagsinput" class="form-control" id="client_allocated_ips">
                            </div>
                            <div class="form-group">
                                <label for="client_allowed_ips" class="control-label">Allowed IPs
                                    <i class="fas fa-info-circle" data-toggle="tooltip"
                                       data-original-title="Specify a list of addresses that will get routed to the
                                       server. These addresses will be included in 'AllowedIPs' of client config">
                                    </i>
                                </label>
                                <input type="text" data-role="tagsinput" class="form-control" id="client_allowed_ips"
                                    value="{{ StringsJoin .client_defaults.AllowedIps "," }}">
                            </div>
                            <div class="form-group">
                                <label for="client_extra_allowed_ips" class="control-label">Extra Allowed IPs
                                    <i class="fas fa-info-circle" data-toggle="tooltip"
                                       data-original-title="Specify a list of addresses that will get routed to the
                                       client. These addresses will be included in 'AllowedIPs' of WG server config">
                                    </i>
                                </label>
                                <input type="text" data-role="tagsinput" class="form-control" id="client_extra_allowed_ips" value="{{ StringsJoin .client_defaults.ExtraAllowedIps "," }}">
                            </div>
                            <div class="form-group">
                                <label for="client_endpoint" class="control-label">Endpoint</label>
                                <input type="text" class="form-control" id="client_endpoint" name="client_endpoint">
                            </div>
                            <div class="form-group">
                                <div class="icheck-primary d-inline">
                                    <input type="checkbox" id="use_server_dns" {{ if .client_defaults.UseServerDNS }}checked{{ end }}>
                                    <label for="use_server_dns">
                                        Use server DNS
                                    </label>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="icheck-primary d-inline">
                                    <input type="checkbox" id="enabled" {{ if .client_defaults.EnableAfterCreation }}checked{{ end }}>
                                    <label for="enabled">
                                        Enable after creation
                                    </label>
                                </div>
                            </div>
                            <details>
                                <summary><strong>Public and Preshared Keys</strong>
                                    <i class="fas fa-info-circle" data-toggle="tooltip"
                                       data-original-title="If you don't want to let the server generate and store the
                                       client's private key, you can manually specify its public and preshared key here
                                       . Note: QR code will not be generated">
                                    </i>
                                </summary>
                                <div class="form-group" style="margin-top: 1rem">
                                    <label for="client_public_key" class="control-label">
                                        Public Key
                                    </label>
                                    <input type="text" class="form-control" id="client_public_key" name="client_public_key" placeholder="Autogenerated" aria-invalid="false">
                                </div>
                                <div class="form-group">
                                    <label for="client_preshared_key" class="control-label">
                                        Preshared Key
                                    </label>
                                    <input type="text" class="form-control" id="client_preshared_key" name="client_preshared_key" placeholder="Autogenerated - enter &quot;-&quot; to skip generation">
                                </div>
                            </details>
                            <details style="margin-top: 0.5rem;">
                                <summary><strong>Additional configuration</strong>
                                </summary>
                                <div class="form-group" style="margin-top: 0.5rem;">
                                    <label for="client_telegram_userid" class="control-label">Telegram userid</label>
                                    <input type="text" class="form-control" id="client_telegram_userid" name="client_telegram_userid">
                                </div>
                                <div class="form-group">
                                    <label for="additional_notes" class="control-label">Notes</label>
                                    <textarea class="form-control" style="min-height: 6rem;" id="additional_notes" name="additional_notes" placeholder="Additional notes about this client"></textarea>
                                </div>
                            </details>
                        </div>
                        <div class="modal-footer justify-content-between">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                            <button type="submit" class="btn btn-primary">Submit</button>
                        </div>
                    </form>
                </div>
                <!-- /.modal-content -->
            </div>
            <!-- /.modal-dialog -->
        </div>
        <!-- /.modal -->

        <div class="modal fade" id="modal_apply_config">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title">Apply Config</h4>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <p>Do you want to write config file and restart WireGuard server?</p>
                    </div>
                    <div class="modal-footer justify-content-between">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                        <button type="button" class="btn btn-danger" id="apply_config_confirm">Apply</button>
                    </div>
                </div>
                <!-- /.modal-content -->
            </div>
            <!-- /.modal-dialog -->
        </div>
        <!-- /.modal -->

        <!-- Content Wrapper. Contains page content -->
        <div class="content-wrapper">
            <!-- Content Header (Page header) -->
            <section class="content-header">
                <div class="container-fluid">
                    <div class="row mb-2">
                        <div class="col-sm-6">
                            <h1>{{template "page_title" .}}</h1>
                        </div>
                    </div>
                </div><!-- /.container-fluid -->
            </section>

            <!-- Main content -->
            {{template "page_content" .}}
            <!-- /.content -->
        </div>
        <!-- /.content-wrapper -->
        <!--
        <footer class="main-footer">
            <div class="float-right d-none d-sm-block">
                <b>Version</b> {{ .appVersion }}
            </div>
            <strong>Copyright &copy; <script>document.write(new Date().getFullYear())</script> <a href="https://github.com/ngoduykhanh/wireguard-ui">Wireguard UI</a>.</strong> All rights
            reserved.
        </footer>
        -->
        <!-- Control Sidebar -->
        <aside class="control-sidebar control-sidebar-dark">
            <!-- Control sidebar content goes here -->
        </aside>
        <!-- /.control-sidebar -->
    </div>
    <!-- ./wrapper -->

    <!-- jQuery -->
    <script src="{{.basePath}}/static/plugins/jquery/jquery.min.js"></script>
    <!-- Bootstrap 4 -->
    <script src="{{.basePath}}/static/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
    <!-- Select2 -->
    <script src="{{.basePath}}/static/plugins/select2/js/select2.full.min.js"></script>
    <!-- jquery-validation -->
    <script src="{{.basePath}}/static/plugins/jquery-validation/jquery.validate.min.js"></script>
    <!-- Toastr -->
    <script src="{{.basePath}}/static/plugins/toastr/toastr.min.js"></script>
    <!-- Jquery Tags Input -->
    <script src="{{.basePath}}/static/plugins/jquery-tags-input/dist/jquery.tagsinput.min.js"></script>
    <!-- AdminLTE App -->
    <script src="{{.basePath}}/static/dist/js/adminlte.min.js"></script>
    <!-- Custom js -->
    <script src="{{.basePath}}/static/custom/js/helper.js"></script>
    <script>
        // initialize all tooltips
        $(function () {
            $('[data-toggle="tooltip"]').tooltip()
        })

        $(document).ready(function () {

            addGlobalStyle(`
.toast-top-right-fix {
    top: 67px;
    right: 12px;
}
            `, 'toastrToastStyleFix')

            toastr.options.closeDuration = 100;
            // toastr.options.timeOut = 10000;
            toastr.options.positionClass = 'toast-top-right-fix';

            updateApplyConfigVisibility()

        });

        function addGlobalStyle(css, id) {
            if (!document.querySelector('#' + id)) {
                let head = document.head
                if (!head) { return }
                let style = document.createElement('style')
                style.type = 'text/css'
                style.id = id
                style.innerHTML = css
                head.appendChild(style)
            }
        }

        function updateApplyConfigVisibility() {
                $.ajax({
                    cache: false,
                    method: 'GET',
                    url: '{{.basePath}}/test-hash',
                    dataType: 'json',
                    contentType: "application/json",
                    success: function(data) {
                        if (data.status) {
                            $("#apply-config-button").show()
                        }
                        else
                        {
                            $("#apply-config-button").hide()
                        }
                    },
                    error: function(jqXHR, exception) {
                        const responseJson = jQuery.parseJSON(jqXHR.responseText);
                        toastr.error(responseJson['message']);
                    }
                });
        }
        
        // populateClient function for render new client info
        // on the client page.
        function populateClient(client_id) {
            $.ajax({
                cache: false,
                method: 'GET',
                url: '{{.basePath}}/api/client/' + client_id,
                dataType: 'json',
                contentType: "application/json",
                success: function (resp) {
                    renderClientList([resp]);
                },
                error: function (jqXHR, exception) {
                    const responseJson = jQuery.parseJSON(jqXHR.responseText);
                    toastr.error(responseJson['message']);
                }
            });
        }

        // submitNewClient function for new client form submission
        function submitNewClient() {
            const name = $("#client_name").val();
            const email = $("#client_email").val();
            const telegram_userid = $("#client_telegram_userid").val();
            const allocated_ips = $("#client_allocated_ips").val().split(",");
            const allowed_ips = $("#client_allowed_ips").val().split(",");
            const endpoint = $("#client_endpoint").val();
            let use_server_dns = false;
            let extra_allowed_ips = [];

            if ($("#client_extra_allowed_ips").val() !== "") {
                extra_allowed_ips = $("#client_extra_allowed_ips").val().split(",");
            }


            if ($("#use_server_dns").is(':checked')){
                use_server_dns = true;
            }

            let enabled = false;

            if ($("#enabled").is(':checked')){
                enabled = true;
            }
            const public_key = $("#client_public_key").val();
            const preshared_key = $("#client_preshared_key").val();
            
            const additional_notes = $("#additional_notes").val();

            const data = {"name": name, "email": email, "telegram_userid": telegram_userid, "allocated_ips": allocated_ips, "allowed_ips": allowed_ips,
                "extra_allowed_ips": extra_allowed_ips, "endpoint": endpoint, "use_server_dns": use_server_dns, "enabled": enabled,
                "public_key": public_key, "preshared_key": preshared_key, "additional_notes": additional_notes};

            $.ajax({
                cache: false,
                method: 'POST',
                url: '{{.basePath}}/new-client',
                dataType: 'json',
                contentType: "application/json",
                data: JSON.stringify(data),
                success: function(resp) {
                    $("#modal_new_client").modal('hide');
                    toastr.success('Created new client successfully');
                    // Update the home page (clients page) after adding successfully
                    if (window.location.pathname === "{{.basePath}}/") {
                        populateClient(resp.id);
                    }
                    updateApplyConfigVisibility()
                },
                error: function(jqXHR, exception) {
                    const responseJson = jQuery.parseJSON(jqXHR.responseText);
                    toastr.error(responseJson['message']);
                }
            });
        }

        // updateIPAllocationSuggestion function for automatically fill
        // the IP Allocation input with suggested ip addresses
        function updateIPAllocationSuggestion(forceDefault = false) {
            let subnetRange = $("#subnet_ranges").select2('val');

            if (forceDefault || !subnetRange || subnetRange.length === 0) {
                subnetRange = '__default_any__'
            }
            $.ajax({
                cache: false,
                method: 'GET',
                url: `{{.basePath}}/api/suggest-client-ips?sr=${subnetRange}`,
                dataType: 'json',
                contentType: "application/json",
                success: function(data) {
                    const allocated_ips = $("#client_allocated_ips").val().split(",");
                    allocated_ips.forEach(function (item, index) {
                        $('#client_allocated_ips').removeTag(escape(item));
                    })
                    data.forEach(function (item, index) {
                        $('#client_allocated_ips').addTag(item);
                    })
                },
                error: function(jqXHR, exception) {
                    const allocated_ips = $("#client_allocated_ips").val().split(",");
                    allocated_ips.forEach(function (item, index) {
                        $('#client_allocated_ips').removeTag(escape(item));
                    })
                    const responseJson = jQuery.parseJSON(jqXHR.responseText);
                    toastr.error(responseJson['message']);
                }
            });
        }
    </script>
    <script>
        //Initialize Select2 Elements
        $(".select2").select2()

        // IP Allocation tag input
        $("#client_allocated_ips").tagsInput({
            'width': '100%',
            'height': '75%',
            'interactive': true,
            'defaultText': 'Add More',
            'removeWithBackspace': true,
            'minChars': 0,
            'minInputWidth': '100%',
            'placeholderColor': '#666666'
        });

        // AllowedIPs tag input
        $("#client_allowed_ips").tagsInput({
            'width': '100%',
            'height': '75%',
            'interactive': true,
            'defaultText': 'Add More',
            'removeWithBackspace': true,
            'minChars': 0,
            'minInputWidth': '100%',
            'placeholderColor': '#666666'
        });

        $("#client_extra_allowed_ips").tagsInput({
            'width': '100%',
            'height': '75%',
            'interactive': true,
            'defaultText': 'Add More',
            'removeWithBackspace': true,
            'minChars': 0,
            'minInputWidth': '100%',
            'placeholderColor': '#666666'
        });

        // New client form validation
        $(document).ready(function () {
            $.validator.setDefaults({
                submitHandler: function () {
                    submitNewClient();
                }
            });
            $("#frm_new_client").validate({
                rules: {
                    client_name: {
                        required: true,
                    },
                },
                messages: {
                    client_name: {
                        required: "Please enter a name"
                    },
                },
                errorElement: 'span',
                errorPlacement: function (error, element) {
                    error.addClass('invalid-feedback');
                    element.closest('.form-group').append(error);
                },
                highlight: function (element, errorClass, validClass) {
                    $(element).addClass('is-invalid');
                },
                unhighlight: function (element, errorClass, validClass) {
                    $(element).removeClass('is-invalid');
                }
            });
        });

        // New Client modal event
        $(document).ready(function () {
            $("#modal_new_client").on('shown.bs.modal', function (e) {
                $("#client_name").val("");
                $("#client_email").val("");
                $("#client_public_key").val("");
                $("#client_preshared_key").val("");
                $("#client_allocated_ips").importTags('');
                $("#client_extra_allowed_ips").importTags('');
                $("#client_endpoint").val('');
                $("#client_telegram_userid").val('');
                $("#additional_notes").val('');
                updateSubnetRangesList("#subnet_ranges");
                updateIPAllocationSuggestion(true);
            });
        });

        // handle subnet range select
        $('#subnet_ranges').on('select2:select', function (e) {
            // console.log('Selected Option: ', $("#subnet_ranges").select2('val'));
            updateIPAllocationSuggestion();
        });

        // apply_config_confirm button event
        $(document).ready(function () {
            $("#apply_config_confirm").click(function () {
                $.ajax({
                    cache: false,
                    method: 'POST',
                    url: '{{.basePath}}/api/apply-wg-config',
                    dataType: 'json',
                    contentType: "application/json",
                    success: function(data) {
                        updateApplyConfigVisibility()
                        $("#modal_apply_config").modal('hide');
                        toastr.success('Applied config successfully');
                    },
                    error: function(jqXHR, exception) {
                        const responseJson = jQuery.parseJSON(jqXHR.responseText);
                        toastr.error(responseJson['message']);
                    }
                });
            });
        });
    </script>

    <!-- START: On page script -->
    {{template "bottom_js" .}}
    <!-- END: On page script -->
</body>

</html>
{{end}}
